<template>
	<view class="availableOrder">
		<view class="back-to-available" @click="toAvailablePage">
			<image class="back" src="@/static/tabbar/back.png" alt="back"></image>
			返回
		</view>

		<map class="route" name="">
			
		</map>
		
		<view class="main">
			<view class="order-id">
				订单编号：{{orderList.orderNumber}}
			</view>
			<view class="from-to">
				<view class="sender-place">
					{{orderList.orderFromAddress.substr(0,2)}}
				</view>
				<view class="">
					<image src="@/static/tabbar/arrow.png" alt=""></image>
				</view>
				<view class="receiver-place">
					{{orderList.orderToAddress.substr(0,2)}}
				</view>
			</view>
			<view class="receiver">
				<view class="name-icon">
					寄
				</view>
				<view class="name">
					{{orderList.orderFromName}}{{' '}}{{orderList.orderFromPhone}}
				</view>
			</view>
			<view class="sender">
				<view class="name-icon">
					收
				</view>
				<view class="name">
					{{orderList.orderToName}}{{' '}}{{orderList.orderToPhone}}
				</view>
			</view>
			<view class="package-info">
				<text>物品类型：普货</text>
				<text>物品重量：{{orderList.orderWeight}}</text>
				<text>备注：{{orderList.remark}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {listOrder,getOrder} from "@/api/order";
	import app from "@/App.vue";
	export default {
		data(){
			return {
				orderNumber:'',
				orderList:{},
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					orderId: undefined,
					orderNumber: undefined,
					postmanPhone: undefined,
					partyPhone: undefined,
					orderParty: undefined,
					orderPostman: undefined,
					orderStatus:undefined,
					orderDept: undefined
				},
			}
		},
		onLoad(options) {
	
				this.orderId=options.orderId
				console.log('111')

			
		},
		onShow() {
			
			// this.queryParams.orderId=parseFloat(this.orderId)
			// console.log(this.queryParams)	
			
			getOrder(parseFloat(this.orderId)).then(res => {
				console.log('ggg')
			  this.orderList = res.data;
			  console.log(this.orderList)
			  
			})
		},
		methods:{
			toAvailablePage(){
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.availableOrder {
		padding: 30rpx 50rpx;
		font-size: 32rpx;
		line-height: 50rpx;
		
		.back-to-available {
			height: 100rpx;
			line-height: 100rpx;
			// background-color: #ffe4d3;
			border-bottom: 1rpx solid #ddd;
			
			.back {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: -9rpx;
			}
		}
		
		
		.route {
			margin-top: 50rpx;
			margin-left: 50rpx;
		}
		
		.main {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			
			.order-id {
				height: 60rpx;
				line-height: 60rpx;
				border-bottom: 1px solid #ddd;
			}
			
			.from-to {
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 150rpx;
				border-bottom: 1px solid #ddd;
				font-weight: bold;
			
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
			
			.receiver,
			.sender {
				padding: 30rpx 0;
				border-bottom: 1px solid #ddd;
			
				.name {
					display: flex;
					align-items: center;
					
			
					
				}
				
				.name-icon {
					display: block;
					float: left;
					width: 50rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					border-radius: 50%;
					background-color: #ffe4d3;
					color: #d49386;
					margin-right: 20rpx;
				}
				
				
			}
			.package-info {
				padding: 30rpx 0 0;
				display: flex;
				flex-direction: column;
			}
		}
	}
</style>